{{extend 'layout.html'}}

<style>
.comment,
#addCommentContainer{
    
    /* Syling the comments and the comment form container */
    padding:12px;
    width: 440px;
    position:relative;
    border:1px solid black;
    color:#888;
    margin-top:25px;
    
    /* CSS3 rounded corners and drop shadows */
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;

    -moz-box-shadow:2px 2px 0 #c2c2c2;
    -webkit-box-shadow:2px 2px 0 #c2c2c2;
    box-shadow:2px 2px 0 #c2c2c2;
}

.comment .meta {
    margin-bottom: 30px;
    padding: 0px 30px 0px 30px;
    text-align: left;
    font-weight: bold;
}

.comment .meta .date {
    float: left;
}

.comment .meta .posted {
    float: right;
}

.comment .meta a {
}

.comment .entry p {
    white-space: normal !important;
}

input[type=text], input[type=password], textarea
{
    width: 250px; 
    height: 100px; 
}

h2,h3
{
    text-align: center;
}

table, th
{
    font-weight: bold;
}

/* Content */
.comment-page{
    margin: auto;
    width: 600px;
    padding: 0px 0px 0px 0px;
    font-size: 14px;
}

</style>

{{for comment in comments:}}
  {{=comment.modified_by.first_name}} {{=comment.modified_by.last_name}} says "{{=comment.comment}}"
<br/>
{{pass}}
{{=form}}

<div id="add_comment">
    <div class="comment" style='margin-left:25px; margin-top:5px;'>
      <p class="meta">
        {{=form}}
      </p>
    </div>
</div>

{{for comment in comments:}}
<div class="comment">
  <p class="meta">
    <span class="posted">
      Posted by {{=comment.created_by.first_name}} {{=comment.created_by.last_name}}
      {{ if comment.created_by == auth.user_id: }}
        {{=A('(Delete)', _href = URL(r = request,f = 'deleteComment',
                                         args = (comment.id)))}}
        {{pass}}
    </span>
  </p>
  <div style="clear: both;">&nbsp;</div>
  <div class="entry">
    {{=MARKMIN(comment.comment)}}
  </div>
</div>
{{pass}}
</div>
